<template>
	<view class="pointer">
		<template v-for="(item,index) in data">
			<template v-if="!item.children || !item.children.length">
				<uni-menu-item :index="item">
					<template slot-scope="data">
						<view v-if="item.icon && item.icon.indexOf('/') === -1" :class="item.icon"></view>
						<image v-else-if="item.icon.indexOf('/') !== -1" :src="data.active ? item.icon_active : item.icon" class="item-icon" mode="aspectFit"></image>
						<view v-else class="dot" :class="{'dot-active': data.active}"></view>
						<text :class="{title: item.icon, subTitle: !item.icon}">{{ $t(`menu.${item.name}`) }}</text>
					</template>
				</uni-menu-item>
			</template>
			<uni-sub-menu v-else :index="item">
				<template v-slot:title>
					<view v-if="item.icon && item.icon.indexOf('/') === -1" :class="item.icon"></view>
					<image v-else-if="item.icon.indexOf('/') !== -1" :src="item.icon" class="item-icon" mode="aspectFit"></image>
					<view v-else class="dot"></view>
					<text :class="{title: item.icon}">{{ $t(`menu.${item.name}`) }}</text>
				</template>
				<uni-menu-sidebar class="item-bg"  :data="item.children" :key="item._id" />
			</uni-sub-menu>
		</template>
	</view>
</template>

<script>
	import uniMenuSidebar from '../uni-menu-sidebar/uni-menu-sidebar.vue'
	export default {
		name: 'uniMenuSidebar',
		components: {
			uniMenuSidebar
		},
		props: {
			data: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {};
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.title {
		margin-left: 16px;
		font-size: 20px;
	}
	.item-icon {
		width: 24px;
		height: 24px;
	}
	.dot {
		width: 8px;
		height: 8px;
		background-color: #246540;
		border-radius: 4px;
		margin-right: 16px;
		margin-left: 8px;
	}
	.dot-active {
		background-color: #174234;
	}
	.subTitle {
		margin-left: 8px;
		font-size: 16px;
	}
</style>
